<template>
  <view class="container">
    <image class="walletBg" src="../../static/images/walletBg.png" mode="aspectFill"></image>
    <view class="tp">
      <uv-navbar title="钱包" placeholder leftIconColor="#fff" bgColor="rgba(0,0,0,0)" :titleStyle="{'color':'#fff'}"
        autoBack></uv-navbar>
      <view class="walletInfo">
        <view class="linner">
          <view class="canuse">
            <view class="canuse-title">
              可用余额(元)
            </view>
            <view class="canuse-money">
              1290.00
            </view>
          </view>
        </view>
        <view class="linner" style="position: absolute;bottom: 62rpx;width: 100%;justify-content: flex-end;">
<!--          <view class="canuse">
            <view class="canuse-title">
              资格
            </view>
            <view class="canuse-money">
              3.00
            </view>
          </view> -->
          <view class="tixian_btn" @click="toTixian">
            提现
          </view>
        </view>
      </view>
    </view>
    <view class="menu">
      <view class="menu-item" @click="toPage('duihuan')">
        <view class="label">
          兑换记录
        </view>
        <image class="arrow_icon" src="/static/images/arrow.png" mode=""></image>
      </view>
      <view class="menu-item" @click="toPage('tixian')">
        <view class="label">
          提现记录
        </view>
        <image class="arrow_icon" src="/static/images/arrow.png" mode=""></image>
      </view>
      <view class="menu-item" @click="toPage('xiaofei')">
        <view class="label">
          消费记录
        </view>
        <image class="arrow_icon" src="/static/images/arrow.png" mode=""></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      toTixian() {
        uni.navigateTo({
          url: "/pages/mine/withDraw"
        })
      },
      toPage(temp) {
        switch (temp) {
          case 'duihuan':
            uni.navigateTo({
              url: "/pages/mine/duihuanList"
            })
            break;
          case 'tixian':
            uni.navigateTo({
              url: "/pages/mine/tixianList"
            })
            break;
          case 'xiaofei':
            uni.navigateTo({
              url: "/pages/mine/xiaofeiList"
            })
            break;
          default:
            break;
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #fff;

    .walletBg {
      width: 100vw;
      height: 490rpx;
      position: relative;
      top: 0;
      left: 0;
      z-index: 10;
    }

    .tp {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 50;
      width: 100%;
      height: 490rpx;

      .walletInfo {
        padding: 50rpx 30rpx 30rpx 30rpx;
        box-sizing: border-box;

        .linner {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .canuse {
            .canuse-title {
              font-weight: 500;
              font-size: 28rpx;
              color: #FFFFFF;
            }

            .canuse-money {
              font-weight: bold;
              font-size: 64rpx;
              color: #FFFFFF;
              margin-top: 20rpx;
            }
          }

          .tixian_btn {
            width: 270rpx;
            height: 68rpx;
            background: #FFFFFF;
            border-radius: 34rpx;
            font-weight: 500;
            font-size: 32rpx;
            color: #F86F03;
            text-align: center;
            line-height: 68rpx;
          }
        }
      }
    }

    .menu {
      padding: 0 30rpx;
      box-sizing: border-box;
      border-radius: 32rpx;
      position: relative;
      top: -32rpx;
      z-index: 50;
      background: #fff;

      .menu-item {
        border-bottom: 2rpx solid #eee;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .label {
          font-weight: 500;
          font-size: 32rpx;
          color: #000000;
        }

        .arrow_icon {
          width: 44rpx;
          height: 44rpx;
        }
      }
    }
  }
</style>